<template>
	<view>
		<view class="search_box">
			<view class="search">
				<u-search v-model="value" shape="round" bgColor="#FFF" placeholder="请输入搜索关键词" use-right-icon-slot @custom="onSearch">
					<!-- <view class="right-icon z-font-22 z-flex" slot="right-icon" @tap="onSearch">搜索</view> -->
				</u-search>
			</view>
			<view class="history z-padding-lr-40" v-if="history.length>0">
				<view class="text_999 z-font-24">历史记录</view>
				<image src="../../static/index/rubbish.png" @tap="del" class="rubbish" mode="aspectFill" />
			</view>
			<view class="history_box">
				<view
					class="history_item z-font-24 z-margin-b-16 z-radius-16 z-padding-tb-16 z-padding-lr-32"
					v-for="(item,index) in history"
					:key="index"
					@tap="wordTap(item)"
				>
					{{ item }}
				</view>
			</view>
			<view class="rankbox z-padding-32 z-radius-32" v-if="list.length>0">
				<view class="rankbox_top">
					<view class="z-font-w">销量排行</view>
					<image src="/static/service/rank.png" class="rankimg" mode="" />
				</view>
				<view class="rankbox_white z-padding-16 z-radius-16 z-font-24">
					<view class="rankbox_white_item z-margin-tb-16" v-for="(item,index) in list" :key="index" @tap="serviceTap(item)">
						<view :class="index==0?'one':index==1?'two':index==2?'three':'same'" class="z-padding-lr-8 z-font-24 z-radius-8 z-margin-r-8">{{ index + 1 }}</view>
						<view class="hidden">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from "../../utils/http"
export default {
	data() {
		return {
			value: '',
			history: [],
			type: 1,
			list: [],
			page: 1,
			address: ''
		};
	},
	onLoad(options) {
		this.type = options.type
		this.address = uni.getStorageSync('address')
		this.getList()
	},
	onShow() {
		this.history = uni.getStorageSync('keyword'+this.type) || []
	},
	methods: {
		serviceTap(e) {
			this.util.skip('/service/servedetail/servedetail?id=' + e.id);
		},
		getList() {
			http.get('goods/getlist', {
				page: this.page,
				is_rank: 1,
				city: this.address.city
			}).then((res) => {
				this.list = res.data
			});
		},
		onLoadAddress(option) {
			this.address = app.globalData.address
			this.getList();
		},
		del() {
			this.history = []
			uni.setStorageSync('keyword' + this.type, this.history);
		},
		wordTap(e) {
			this.value = e
			this.onSearch();
		},
		onSearch() {
			console.log(11111111111)
			if (this.value === '') return this.util.toast('请输入搜索内容');
			let index = this.history.indexOf(this.value);
			if (index !== -1) {
				this.history.splice(index, 1);
			}
			this.history.unshift(this.value);
			this.history = this.history
			uni.setStorageSync('keyword' + this.type, this.history);
			uni.navigateTo({
				url: '/service/searchresult/searchresult?value=' + this.value + '&type=' + this.type
			});
		}
	}
};
</script>

<style>
/* pagesA/searchdetail/searchdetail.wxss */
.search_box {
	width: 100vw;
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
	background-color: #edf1f4;
}
.search {
	width: 95vw;
	margin: 0 auto;
	box-sizing: border-box;
}
.van-cell__left-icon-wrap {
	margin-top: 8rpx;
}
.van-search__content {
	background-color: #fff !important;
}

.right-icon {
	color: #fff;
	background-color: #62cb81;
	border-radius: 40rpx;
	width: 90rpx;
	height: 58rpx;
}
.history {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.rubbish {
	width: 24rpx;
	height: 24rpx;
}
.history_box {
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	width: 90vw;
	box-sizing: border-box;
	margin: 20rpx auto;
}
.history_item {
	display: inline;
	background-color: #fff;
	margin-right: 24rpx;
}
.rankbox {
	width: 90vw;
	margin: 0 auto;
	box-sizing: border-box;
	background-color: #fceef0;
}
.rankimg {
	width: 200rpx;
	height: 95rpx;
}
.rankbox_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.rankbox_white {
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.rankbox_white_item {
	display: flex;
	align-items: center;
	width: 50%;
}
.one {
	background: linear-gradient(90deg, #e57c66 0%, #ee5439 100%);
	color: #fff;
}
.two {
	background: linear-gradient(90deg, #eaa544 0%, #e78939 100%);
	color: #fff;
}
.three {
	background: linear-gradient(90deg, #f7d359 0%, #f0bc51 100%);
	color: #fff;
}
.same {
	color: #fff;
	background-color: #d1b29d;
}
</style>
